<template>
	<view>
		
			<view class="status_bar">
				<!-- 这里是状态栏 -->
			</view>
		<view class="cu-bar search flex justify-between" style="background-color: #f0f0f0;">
			<view class="action">
				<text class="cuIcon-back text-gray" @tap="goback"></text>
			</view>
			<view class="content">
				更改名字
			</view>
			<view class="action">
				<button class="cu-btn block margin-tb-sm lg" :class="noEdit?'line-green':'bg-green'" style="height: 60upx;" :disabled="noEdit" @click="submitNickname">保存</button>
			</view>
		</view>
		<view class="view1">
			<view>
				<input v-model="nickname" placeholder="输入昵称">
			</view>
			<!-- view就是下划线 -->
			<view class="bg-gradual-green" style="height: 1px;"></view>
			<view style="margin-top: 15upx;">
				<text class="text-gray text-sm">好名字可以让你的朋友更容易记住你。</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(options) {
			console.log(options.nickname);
			this.nickname = options.nickname
		},
		watch: {
			nickname: function (newVal, oldVal){
				if(oldVal != null) {
					this.noEdit = false
				}
			}
		},
		data() {
			return {
				noEdit: true,
				nickname: null
			}
		},
		methods: {
			goback() {
				uni.navigateBack(-1)
			},
			async submitNickname() {
				if(this.nickname.trim() == ''){
					uni.showToast({
						title:"没有输入昵称，请重新填写",
						icon:"none"
					})
				}else{
					const userInfo = this.$tool.getStorageSync("userInfo")
					userInfo.nickname = this.nickname
					
					var res = await this.$request({
						baseURL:this.$tool.serverURL,
						url:'user/update',
						params:userInfo,
						type:'post'
					})
					if(res.status == 200) {
						this.$tool.setStorageSync("userInfo",userInfo)
						uni.switchTab({
							url:'../tabBar/me'
						})
					}
				}
			}
		}
	}
</script>

<style>
	 .status_bar {
	      height: var(--status-bar-height);
	      width: 100%;
	  }
	.view1 {
		margin-left: 20upx;
		margin-right: 20upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-top: 50upx;
	}
</style>
